<template>
  <div>
    <!-- 加载中 -->
    <a-spin :spinning='isLoading' />
    <!-- 订单内容 -->
    <div v-if='!isLoading' class='order-content'>
      <!-- 订单进度步骤条 -->
      <a-card :bordered='false'>
        <div class='order-progress' :class='`progress-${progress}`'>
          <ul>
            <li>
              <span>下单时间</span>
              <div class='tip'>{{ record.create_time }}</div>
            </li>
            <li>
              <span>付款</span>
              <div
                v-if='record.pay_status == PayStatusEnum.SUCCESS.value'
                class='tip'
              >付款于 {{ record.pay_time }}
              </div>
            </li>
            <li>
              <span>发货</span>
              <div
                v-if='record.delivery_status == DeliveryStatusEnum.DELIVERED.value'
                class='tip'
              >发货于 {{ record.delivery_time }}
              </div>
            </li>
            <li>
              <span>收货</span>
              <div
                v-if='record.receipt_status == ReceiptStatusEnum.RECEIVED.value'
                class='tip'
              >收货于 {{ record.receipt_time }}
              </div>
            </li>
            <li>
              <span>完成</span>
              <div
                v-if='record.order_status == OrderStatusEnum.COMPLETED.value'
                class='tip'
              >完成于 {{ record.receipt_time }}
              </div>
            </li>
          </ul>
        </div>
      </a-card>

      <!-- 订单信息 -->
      <a-card class='mt-20' :bordered='false'>
        <!-- 订单操作 -->
        <template v-if='record.order_status != OrderStatusEnum.CANCELLED.value'>
          <div class='ant-descriptions-title'>订单操作</div>
          <!-- 提示栏 -->
          <div class='alerts mt-10 mb-15'>
            <a-alert
              v-if='record.order_status== OrderStatusEnum.APPLY_CANCEL.value'
              message='当前买家已付款并申请取消订单，请审核是否同意，如同意则自动退回付款金额（微信支付原路退款）并关闭订单。'
              banner
            />
          </div>
          <!-- 操作栏 -->
          <div class='actions clearfix mt-10'>
            <div class='action-item' v-if="$auth('/order/detail.updatePrice')">
              <a-button
                v-if='record.pay_status == PayStatusEnum.PENDING.value'
                @click='handleUpdatePrice'
              >订单改价</a-button>
              &nbsp;&nbsp;&nbsp;
              <a-button
                v-if='record.pay_status == DeliveryStatusEnum.NOT_DELIVERED.value'
                @click='handleUpdateStatus'
              >支付状态</a-button>
            </div>
            <div class='action-item' v-if="$auth('/order/list/all.deliver')">
              <a-button
                v-if='(
                  record.pay_status == PayStatusEnum.SUCCESS.value
                    && record.delivery_status == DeliveryStatusEnum.NOT_DELIVERED.value
                    && !inArray(record.order_status, [OrderStatusEnum.CANCELLED.value, OrderStatusEnum.APPLY_CANCEL.value])
                )'
                type='primary'
                @click='handleDelivery'
              >发货
              </a-button>
            </div>
            <div class='action-item' v-if="$auth('/order/list/all.cancel')">
              <a-button
                v-if='record.order_status == OrderStatusEnum.APPLY_CANCEL.value'
                type='primary'
                @click='handleCancel'
              >审核取消订单
              </a-button>
            </div>
          </div>
          <a-divider class='o-divider' />
        </template>
        <!-- 订单信息 -->
        <a-descriptions title='订单信息'>
          <a-descriptions-item label='订单号'>{{ record.order_no }}</a-descriptions-item>
          <a-descriptions-item label='订单总金额'>￥{{ record.total_price }}</a-descriptions-item>
          <a-descriptions-item label='会员折扣'>{{ record.goods[0].grade_ratio }}折</a-descriptions-item>
          <a-descriptions-item label='实付款金额'>￥{{ record.pay_price }}</a-descriptions-item>
          <a-descriptions-item label='技师服务费'>￥{{ record.proficient_price }}</a-descriptions-item>
          <a-descriptions-item label='支付方式'>
            <a-tag color='green'>{{ PayTypeEnum[record.pay_type].name }}</a-tag>
          </a-descriptions-item>
          <a-descriptions-item label='下单类型'>
            <a-tag color='green'>{{ OrderTypeEnum[record.order_type].name }}</a-tag>
          </a-descriptions-item>
          <a-descriptions-item label='服务类型'>
            <a-tag color='green'>{{ ServiceTypeEnum[record.service_type].name }}</a-tag>
          </a-descriptions-item>
          <a-descriptions-item label='订单类型'>{{ OrderSourceEnum[record.order_source].name }}</a-descriptions-item>
          <a-descriptions-item label='会员卡描述' v-if='record.order_source == 40'>
            <span>{{ record.vip_introduce }}</span>
          </a-descriptions-item>
          <a-descriptions-item label='订单状态'>
            <a-tag
              :color='renderOrderStatusColor(record.order_status)'
            >{{ OrderStatusEnum[record.order_status].name }}
            </a-tag>
          </a-descriptions-item>
<!--          <a-descriptions-item label='买家信息'>-->
<!--            <a-tooltip>-->
<!--              <template slot='title'>会员ID: {{ record.user.user_id }}</template>-->
<!--              <span class='c-p'>{{ record.user.nick_name }}</span>-->
<!--            </a-tooltip>-->
<!--          </a-descriptions-item>-->
          <a-descriptions-item label='买家留言'>
            <strong v-if='record.buyer_remark'>{{ record.buyer_remark }}</strong>
            <span v-else>--</span>
          </a-descriptions-item>
          <a-descriptions-item label='预约时间'>{{ record.service_time }}</a-descriptions-item>


          <a-descriptions-item label='下单姓名'>{{ record.username }}</a-descriptions-item>
          <a-descriptions-item label='联系方式'>{{ record.mobile }}</a-descriptions-item>
        </a-descriptions>
      </a-card>

      <!-- 服务信息 -->
      <a-card class='mt-20' :bordered='false'>
        <div class='ant-descriptions-title'>订单服务</div>
        <div class='goods-list'>
          <a-table
            rowKey='order_goods_id'
            :columns='goodsColumns'
            :dataSource='record.goods'
            :pagination='false'
          >
            <!-- 服务信息 -->
            <template slot='goodsInfo' slot-scope='text, item'>
              <GoodsItem
                :data="{
                  image: item.goods_image,
                  imageAlt: '服务图片',
                  title: item.goods_name,
                  goodsProps: item.goods_props
                }"
              />
            </template>
            <!-- 服务编码 -->
            <span slot='goods_no' slot-scope='text'>{{ text ? text : '--' }}</span>
            <!-- 单价	 -->
            <template slot='goods_price' slot-scope='text, item'>
              <p :class="{ 'f-through': item.is_user_grade }">￥{{ text }}</p>
              <p v-if='item.is_user_grade'>
                <a-tooltip>
                  <template slot='title'>
                    <span class='f-13'>会员等级折扣价</span>
                  </template>
                  <strong>会员价：</strong>
                  <span>￥{{ item.grade_goods_price }}</span>
                </a-tooltip>
              </p>
            </template>
            <!-- 购买数量	 -->
            <span slot='total_num' slot-scope='text'>x{{ text }}</span>
            <!-- 服务总价 -->
            <span slot='total_price' slot-scope='text'>￥{{ text }}</span>
          </a-table>
          <!-- 订单价格明细 -->
          <div class='order-price'>
            <table class='fl-r'>
              <tbody>
              <tr>
                <td>订单总额：</td>
                <td>￥{{ record.total_price }}</td>
              </tr>
              <tr v-if='record.points_money > 0'>
                <td>积分抵扣：</td>
                <td>-￥{{ record.points_money }}</td>
              </tr>
              <tr v-if='record.update_price.value != 0'>
                <td>商家改价：</td>
                <td>{{ record.update_price.symbol }}￥{{ record.update_price.value }}</td>
              </tr>
              <tr>
                <td>实付款金额：</td>
                <td>
                  <strong>￥{{ record.pay_price }}</strong>
                </td>
              </tr>
              </tbody>
            </table>
          </div>
        </div>
      </a-card>
    </div>
    <DeliveryForm ref='DeliveryForm' @handleSubmit='handleRefresh' />
    <CancelForm ref='CancelForm' @handleSubmit='handleRefresh' />
    <PriceForm ref='PriceForm' @handleSubmit='handleRefresh' />
    <StatusForm ref='StatusForm' @handleSubmit='handleRefresh' />
  </div>
</template>

<script>
import { inArray } from '@/utils/util'
import * as Api from '@/api/order'
import { GoodsItem, UserItem } from '@/components/Table'
import { DeliveryForm, CancelForm, PriceForm, StatusForm } from './modules'
import {
  DeliveryStatusEnum,
  DeliveryTypeEnum,
  OrderSourceEnum,
  OrderStatusEnum,
  PayStatusEnum,
  PayTypeEnum,
  ReceiptStatusEnum,
  OrderTypeEnum,
  ServiceTypeEnum
} from '@/common/enum/order'

// 服务内容表头
const goodsColumns = [
  {
    title: '服务信息',
    scopedSlots: { customRender: 'goodsInfo' }
  },
  {
    title: '服务编码',
    dataIndex: 'goods_no',
    scopedSlots: { customRender: 'goods_no' }
  },
  {
    title: '重量(Kg)',
    dataIndex: 'goods_weight',
    scopedSlots: { customRender: 'goods_weight' }
  },
  {
    title: '单价',
    dataIndex: 'goods_price',
    scopedSlots: { customRender: 'goods_price' }
  },
  {
    title: '购买数量',
    dataIndex: 'total_num',
    scopedSlots: { customRender: 'total_num' }
  },
  {
    title: '服务总价',
    dataIndex: 'total_price',
    scopedSlots: { customRender: 'total_price' }
  }
]

export default {
  name: 'Index',
  components: {
    GoodsItem,
    UserItem,
    DeliveryForm,
    CancelForm,
    PriceForm,
    ServiceTypeEnum,
    StatusForm
  },
  data() {
    return {
      // 枚举类
      DeliveryStatusEnum,
      DeliveryTypeEnum,
      OrderSourceEnum,
      OrderStatusEnum,
      PayStatusEnum,
      PayTypeEnum,
      ReceiptStatusEnum,
      OrderTypeEnum,
      ServiceTypeEnum,
      // 外部方法
      inArray,
      // 正在加载
      isLoading: true,
      // 订单ID
      orderId: null,
      // 订单详情
      record: {},
      // 订单步骤位置
      progress: 2,
      // 服务内容表头
      goodsColumns
    }
  },
  created() {
    // 记录订单ID
    this.orderId = this.$route.query.orderId
    // 刷新页面
    this.handleRefresh()
  },
  methods: {

    // 刷新页面
    handleRefresh() {
      // 获取当前记录
      this.getDetail()
    },

    // 获取当前记录
    getDetail() {
      const { orderId } = this
      this.isLoading = true
      Api.detail({ orderId })
        .then(result => {
          // 当前记录
          this.record = result.data.detail
          // 初始化数据
          this.initData()
        })
        .finally(() => {
          this.isLoading = false
        })
    },

    // 初始化数据
    initData() {
      // 步骤条位置
      this.initProgress()
    },

    // 步骤条位置
    initProgress() {
      const { record } = this
      this.progress = 2
      record.pay_status === PayStatusEnum.SUCCESS.value && (this.progress += 1)
      record.delivery_status === DeliveryStatusEnum.DELIVERED.value && (this.progress += 1)
      record.receipt_status === ReceiptStatusEnum.RECEIVED.value && (this.progress += 1)
    },

    // 渲染订单状态标签颜色
    renderOrderStatusColor(orderStatus) {
      const { OrderStatusEnum } = this
      const ColorEnum = {
        [OrderStatusEnum.NORMAL.value]: '',
        [OrderStatusEnum.CANCELLED.value]: 'red',
        [OrderStatusEnum.APPLY_CANCEL.value]: 'red',
        [OrderStatusEnum.COMPLETED.value]: 'green'
      }
      return ColorEnum[orderStatus]
    },

    // 订单发货
    handleDelivery() {
      const { record } = this
      this.$refs.DeliveryForm.show(record)
    },

    // 审核取消订单
    handleCancel() {
      const { record } = this
      this.$refs.CancelForm.show(record)
    },

    // 订单改价
    handleUpdatePrice() {
      const { record } = this
      this.$refs.PriceForm.show(record)
    },

    // 修改支付状态
    handleUpdateStatus() {
      const { record } = this
      this.$refs.StatusForm.show(record)
    }

  }
}
</script>
<style lang='less' scoped>
@import '~ant-design-vue/es/style/themes/default.less';
// 订单详情页
.order-content {
  margin-bottom: 70px;

  /deep/ .ant-descriptions-item > span {
    vertical-align: middle;
  }

  // 分割线
  .o-divider {
    margin-bottom: 32px;
  }

  // 步骤条
  .order-progress {
    height: 26px;
    line-height: 26px;
    background: #f8f8f8;
    border-radius: 13px;
    font-size: 14px;
    text-align: center;
    position: relative;

    &:before,
    &:after {
      content: '';
      position: absolute;
      z-index: 2;
      left: 0;
      top: 0;
      bottom: 0;
      border-radius: 13px;
      background: @primary-color;
    }

    &:after {
      background: ~`colorPalette('@{primary-color}', 3) `;
      z-index: 1;
    }

    &.progress-1 {
      &:before {
        width: 0;
      }

      &:after {
        width: 20%;
      }
    }

    &.progress-2 {
      &:before {
        width: 20%;
      }

      &:after {
        width: 40%;
      }
    }

    &.progress-3 {
      &:before {
        width: 40%;
      }

      &:after {
        width: 60%;
      }
    }

    &.progress-4 {
      &:before {
        width: 60%;
      }

      &:after {
        width: 80%;
      }
    }

    &.progress-5 {
      &:before {
        width: 100%;
      }

      &:after {
        width: 100%;
      }

      li {
        &:nth-child(5) {
          color: #fff;
        }
      }
    }

    li {
      width: 20%;
      float: left;
      border-radius: 13px;
      position: relative;
      z-index: 3;
    }

    .tip {
      font-size: 12px;
      padding-top: 10px;
      color: #8c8c8c;
    }

    &.progress-1 li:nth-child(1),
    &.progress-2 li:nth-child(1),
    &.progress-3 li:nth-child(1),
    &.progress-4 li:nth-child(1),
    &.progress-5 li:nth-child(1) {
      color: #fff;
    }

    &.progress-2 li:nth-child(2),
    &.progress-3 li:nth-child(2),
    &.progress-4 li:nth-child(2),
    &.progress-5 li:nth-child(2) {
      color: #fff;
    }

    &.progress-3 li:nth-child(3),
    &.progress-4 li:nth-child(3),
    &.progress-5 li:nth-child(3) {
      color: #fff;
    }

    &.progress-4 li:nth-child(4),
    &.progress-5 li:nth-child(4) {
      color: #fff;
    }
  }

  // 服务列表
  .goods-list {
    /deep/ table {
      table-layout: auto;
    }

    .order-price {
      padding: 8px 20px;
      text-align: right;
    }
  }

  // 操作栏
  .actions {
    .action-item {
      float: left;
      margin-right: 8px;
    }
  }
}
</style>
